<template>
    <el-card>  
        <el-row :gutter="20">
            <el-col :span="12">
                <img :src="goods.goods_icon">
            </el-col>
            <el-col :span="12">
                <p class="first">{{ goods.goods_desc }}</p>
                <p class="second">￥{{ goods.goods_price }}</p>
                <p class="third">{{ goods.goods_desc }}</p>
                <div class="fourth">
                    <el-input-number v-model="num" :min="1" :max="10" @change="handleChange" />
                    <button @click="addCart">加入购物车</button>
                </div>
            </el-col>
        </el-row>
    </el-card>
</template>

<script setup lang="ts" name="Detail">
    import { ref } from 'vue'
    import request from '../../../myvue/src/utils/request';
    import { useRouter } from 'vue-router';
    import { ElMessage } from 'element-plus'

    const router = useRouter();
    const id = ref(router.currentRoute.value.params.id)
    console.log(id.value)

    const goods = ref({})

    function getDetail() {
        let api = '/goods/detail'
        request({
            url: api,
            method: 'get',
            params: {
                goods_id: id.value
            }
        }).then(res => {
            console.log(res)
            goods.value = res.data
        })
    }

    getDetail()

    const num = ref(1)
    const handleChange = (value: number | undefined) => {
    console.log(value)
    }

    function addCart() {
        let api = '/cart/addCart'
        request({
            url: api,
            method: 'get',
            params: {
                username: localStorage.getItem('UserName'),
                goods_id: id.value,
                quantity: 1,
            }
        }).then(res => {
            ElMessage.success('添加成功')
        })
    }
</script>

<style scoped>
    body {
        background-color: red;
    }
    img {
        width: 450px;
        height: auto;
        border: 1px solid #333;
        margin-bottom: 50px;
    }
    .first {
        font-size: 32px;
        font-weight: 700;
        color: black;
        margin-bottom: 20px ;
    }
    .second {
        font-size: 32px;
        font-weight: 700;
        color: red;
        margin-bottom: 20px ;
    }
    .third {
        color: #777;
        margin-bottom: 20px ;
    }
    .fourth {
        margin-top: 60px;
    }
    .fourth button {
        margin-left: 20px;
    }
</style>